
import React from 'react'
import * as PushMessageAction  from '../../actions/PushMessageAction';
import * as ApiMsgAction  from '../../actions/ApiMsgAction';
import { connect }  from 'react-redux';

class PropertyTemplate extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {

  }

  componentDidUpdate() {

  }

  componentWillReceiveProps(props) {
    if (!this.state.property || props.property.id != this.state.property.id) {
      this.setState({
        property: props.property
      })
      this.props.dispatch(
        PushMessageAction.loadAllTemplateAsync({
          appId: props.property.appId
        })
      )
    }
    if (props.templates) {
      var templates = props.templates;
      var delivery = _.find(templates, function(o) {
        return o.template_type == 'delivery'
      })
      var bill = _.find(templates, function(o) {
        return o.template_type == 'bill'
      })
      var reply = _.find(templates, function(o) {
        return o.template_type == 'suggestion_reply'
      })
      var work_order = _.find(templates, function(o) {
        return o.template_type == 'work_order'
      })
      var deliveryId = delivery?delivery.template_id: "";
      var billId = bill?bill.template_id: "";
      var replyId = reply?reply.template_id: "";
      var workId = work_order?work_order.template_id: ""
      this.setState({
        data: {
          deliveryId: deliveryId,
          billId: billId,
          replyId: replyId,
          workId: workId
        }
      })
    }
  }

  onDataSubmit() {
    var data = this.state.data;
    if (this.checkEmpty(data.deliveryId) || this.checkEmpty(data.billId)
      || this.checkEmpty(data.replyId) || this.checkEmpty(data.workId)) {
      alert("请填写完整信息!")
      return
    }
    data.appId = this.props.property.appId;
    this.props.onTemplateSumbit(data)
    this.setState({
      property: null,
      data: {}
    })
  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  checkEmpty(str) {
    return !str || str.length == 0;
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="PropertySettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Property-modal-label">模板配置</h4>
            </div>
            <div className="modal-body">
              <div className="panel panel-default">
                <div className="panel-heading">快递消息模板</div>
                <div className="panel-body">
                  <div className="form-group">
                    <label for="Property-name">快递消息模板ID</label>
                    <input ref="PropertyName" type="text" className="form-control"
                            id="Property-name" placeholder="快递消息模板ID" value={self.state.data.deliveryId}
                            onChange={(event)=>this.onChange(event, "deliveryId")}/>
                  </div>
                </div>
              </div>
              <div className="panel panel-default">
                <div className="panel-heading">账单模板</div>
                <div className="panel-body">
                  <div className="form-group">
                    <label for="Property-name">账单模板ID</label>
                    <input ref="PropertyName" type="text" className="form-control"
                            id="Property-name" placeholder="账单模板ID" value={self.state.data.billId}
                            onChange={(event)=>this.onChange(event, "billId")}/>
                  </div>
                </div>
              </div>
              <div className="panel panel-default">
                <div className="panel-heading">反馈回复模板</div>
                <div className="panel-body">
                  <div className="form-group">
                    <label for="Property-name">反馈回复模板ID</label>
                    <input ref="PropertyName" type="text" className="form-control"
                            id="Property-name" placeholder="反馈回复模板ID" value={self.state.data.replyId}
                            onChange={(event)=>this.onChange(event, "replyId")}/>
                  </div>
                </div>
              </div>
              <div className="panel panel-default">
                <div className="panel-heading">维修推送模板</div>
                <div className="panel-body">
                  <div className="form-group">
                    <label for="Property-name">维修推送模板ID</label>
                    <input ref="PropertyName" type="text" className="form-control"
                            id="Property-name" placeholder="维修推送模板ID" value={self.state.data.workId}
                            onChange={(event)=>this.onChange(event, "workId")}/>
                  </div>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { templates: state.templates.data}
}

export default connect(mapStateToProps)(PropertyTemplate)
